<template>
	<view class="container">
		<!-- 顶部个人积分与排名 -->
		<view class="header">
			<view class="top">{{userInfo.name}}</view>
			<view class="content">
				<view class="left" v-if="!userInfo.rank">未上榜</view>
				<view class="left" v-else>第 {{userInfo.rank}} 名</view>
				<view class="mid">
					<image src="@/static/icons/defaultPhoto.png" mode="aspectFill" v-if="!userInfo.avatar"></image>
					<image :src="userInfo.avatar" mode="aspectFill" v-else></image>
				</view>
				<view class="right" v-if="!userInfo.credit">0 积分</view>
				<view class="right" v-else>{{userInfo.credit}} 积分</view>
			</view>
		</view>
		<!-- 用户排名列表 -->
		<view class="list">
			<view class="item" v-for="item in userList" :key="item.userId">
				<view class="rank" v-if="!item.rank">未上榜</view>
				<view class="rank" v-else>{{item.rank}}</view>
				<view class="avatar">
					<image src="@/static/icons/defaultPhoto.png" mode="aspectFill" v-if="!item.avatar"></image>
					<image :src="item.avatar" mode="aspectFill" v-else></image>
				</view>
				<view class="name">{{item.name}}</view>
				<view class="points">{{item.credit}}</view>
			</view>


		</view>
	</view>
</template>

<script>
	export default {
		data() {
			return {
				userInfo: {
				},
				userList: []
			}
		},
		onShow() {
			this.getUserRank()
			this.getRankList()
		},
		methods: {
			// 获取当前用户的积分排名数据
			async getUserRank() {
				let {data: res} = await this.$myRequest({
					url: '/userBefore/creditUser/' + uni.getStorageSync('userId')
				})
				if(res.code===20000){
					this.userInfo =res.data.user
					console.log(res.data.user);
				}
			},
			// 获取积分排名列表
			async getRankList(){
				let {data: res} = await this.$myRequest({
					url: '/userBefore/creditUser' 
				})
				if(res.code===20000){
					this.userList = res.data.list
					console.log(res.data);
				}
			}
		}
	}
</script>
<style lang="scss">
	page {
		background-color: #fff;
	}
</style>
<style lang="scss" scoped>
	// 顶部个人积分与排名
	.header {
		background-color: lightcoral;
		height: 400rpx;
		width: 100%;

		.top {
			text-align: center;
			color: white;
			padding-top: 80rpx;
			margin-bottom: 40rpx;
		}

		.content {
			display: flex;
			justify-content: center;
			height: 200rpx;

			.left {
				color: #fff;
				width: 150rpx;
				height: 50rpx;
				text-align: right;
				margin-top: 100rpx;
			}

			.mid {
				margin: 0 100rpx;

				image {
					width: 200rpx;
					height: 200rpx;
					border-radius: 50%;
				}

			}

			.right {
				color: #fff;
				width: 150rpx;
				height: 50rpx;
				margin-top: 100rpx;
			}
		}
	}

	// 用户排名列表
	.list {
		.item {
			width: 100%;
			height: 100rpx;
			display: flex;
			padding: 20rpx 0;
			border-bottom: 1px solid #AEB5A5;

			.rank {
				width: 150rpx;
				display: flex;
				justify-content: center;
				align-items: center;
			}

			.avatar {
				width: 200rpx;
				display: flex;
				justify-content: center;
				align-items: center;

				image {
					width: 100rpx;
					height: 100rpx;
					border-radius: 50%;
				}
			}

			.name {
				width: 40%;
				display: flex;
				align-items: center;
				padding-left: 20rpx;
			}

			.points {
				width: 35%;
				display: flex;
				align-items: center;
				justify-content: center;
			}
		}
	}
</style>
